<template>
  <view class="filter-options">
    <view class="option" @tap="showDistancePopup">
      <text>{{selectedDistance || '附近'}}</text>
      <uni-icons type="bottom" size="12"></uni-icons>
    </view>
    <view class="option" @tap="showSortPopup">
      <text>{{selectedSort || '智能排序'}}</text>
      <uni-icons type="bottom" size="12"></uni-icons>
    </view>
    <view class="option" @tap="showFilterPopup">
      <text>筛选</text>
      <uni-icons type="bottom" size="12"></uni-icons>
    </view>

    <!-- 距离弹出层 -->
    <uni-popup ref="distancePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-title">选择距离</view>
        <view class="popup-list">
          <view 
            class="popup-item" 
            v-for="item in distances" 
            :key="item.value"
            :class="{ active: selectedDistance === item.label }"
            @tap="selectDistance(item)">
            {{item.label}}
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 排序弹出层 -->
    <uni-popup ref="sortPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-title">排序方式</view>
        <view class="popup-list">
          <view 
            class="popup-item" 
            v-for="item in sorts" 
            :key="item.value"
            :class="{ active: selectedSort === item.label }"
            @tap="selectSort(item)">
            {{item.label}}
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 筛选弹出层 -->
    <uni-popup ref="filterPopup" type="right">
      <view class="filter-popup">
        <view class="filter-section">
          <view class="section-title">价格</view>
          <view class="price-range">
            <input type="number" v-model="minPrice" placeholder="最低价"/>
            <text>-</text>
            <input type="number" v-model="maxPrice" placeholder="最高价"/>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="section-title">优惠活动</view>
          <view class="tag-list">
            <view 
              class="tag" 
              v-for="tag in promotions" 
              :key="tag.value"
              :class="{ active: selectedPromotions.includes(tag.value) }"
              @tap="togglePromotion(tag.value)">
              {{tag.label}}
            </view>
          </view>
        </view>

        <view class="filter-buttons">
          <button class="reset-btn" @tap="resetFilter">重置</button>
          <button class="confirm-btn" @tap="confirmFilter">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const distancePopup = ref(null)
const sortPopup = ref(null)
const filterPopup = ref(null)

const selectedDistance = ref('')
const selectedSort = ref('')
const minPrice = ref('')
const maxPrice = ref('')
const selectedPromotions = ref([])

const distances = [
  { label: '500米以内', value: 500 },
  { label: '1千米以内', value: 1000 },
  { label: '2千米以内', value: 2000 },
  { label: '5千米以内', value: 5000 },
  { label: '不限距离', value: -1 }
]

const sorts = [
  { label: '智能排序', value: 'smart' },
  { label: '距离最近', value: 'distance' },
  { label: '好评优先', value: 'rating' },
  { label: '销量最高', value: 'sales' }
]

const promotions = [
  { label: '满减优惠', value: 'reduce' },
  { label: '优惠券', value: 'coupon' },
  { label: '特价商品', value: 'special' },
  { label: '会员优惠', value: 'member' }
]

const emit = defineEmits(['filter-change'])

const showDistancePopup = () => {
  distancePopup.value.open()
}

const showSortPopup = () => {
  sortPopup.value.open()
}

const showFilterPopup = () => {
  filterPopup.value.open()
}

const selectDistance = (item) => {
  selectedDistance.value = item.label
  distancePopup.value.close()
  emitChange()
}

const selectSort = (item) => {
  selectedSort.value = item.label
  sortPopup.value.close()
  emitChange()
}

const togglePromotion = (value) => {
  const index = selectedPromotions.value.indexOf(value)
  if (index > -1) {
    selectedPromotions.value.splice(index, 1)
  } else {
    selectedPromotions.value.push(value)
  }
}

const resetFilter = () => {
  minPrice.value = ''
  maxPrice.value = ''
  selectedPromotions.value = []
}

const confirmFilter = () => {
  filterPopup.value.close()
  emitChange()
}

const emitChange = () => {
  emit('filter-change', {
    distance: selectedDistance.value,
    sort: selectedSort.value,
    price: {
      min: minPrice.value,
      max: maxPrice.value
    },
    promotions: selectedPromotions.value
  })
}
</script>

<style lang="scss" scoped>
.filter-options {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  
  .option {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #666;
    
    uni-icons {
      margin-left: 4px;
    }
  }
}

.popup-content {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  
  .popup-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .popup-list {
    .popup-item {
      padding: 12px 0;
      text-align: center;
      font-size: 14px;
      color: #333;
      
      &.active {
        color: #FF5722;
      }
    }
  }
}

.filter-popup {
  width: 80vw;
  height: 100vh;
  background: #fff;
  padding: 20px;
  
  .filter-section {
    margin-bottom: 20px;
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
  
  .price-range {
    display: flex;
    align-items: center;
    
    input {
      flex: 1;
      height: 40px;
      border: 1px solid #eee;
      border-radius: 4px;
      padding: 0 10px;
      font-size: 14px;
    }
    
    text {
      margin: 0 10px;
      color: #999;
    }
  }
  
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    
    .tag {
      padding: 6px 12px;
      border: 1px solid #eee;
      border-radius: 4px;
      margin: 0 10px 10px 0;
      font-size: 14px;
      color: #666;
      
      &.active {
        color: #FF5722;
        border-color: #FF5722;
        background: rgba(255,87,34,0.1);
      }
    }
  }
  
  .filter-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 15px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    
    button {
      flex: 1;
      height: 40px;
      border-radius: 20px;
      font-size: 14px;
      margin: 0 5px;
      
      &.reset-btn {
        background: #f5f5f5;
        color: #666;
      }
      
      &.confirm-btn {
        background: #FF5722;
        color: #fff;
      }
    }
  }
}
</style> 